<template>
  <div class="app-container">
    <div class="filter-container" style="display: flex">
      <el-form ref="editForm" :rules="editFormRules" :model="editForm" status-icon label-position="right"
               label-width="100px" style="display: flex">
        <el-form-item label="账户号" prop="account" style="width: 400px">
          <el-input v-model="editForm.account" placeholder="账户号"/>
        </el-form-item>
        <el-form-item label="起始日期" prop="startDate">
          <el-date-picker
            v-model="editForm.startDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker
            v-model="editForm.endDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="收付方向" style="width: 250px">
          <el-radio-group v-model="editForm.payRecv">
            <el-radio label="0">收款</el-radio>
            <el-radio label="1">付款</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="margin-left: 30px">
        <el-button type="primary" @click="doQuery" icon="el-icon-search">查询</el-button>
      </div>
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
              :header-cell-style="{background:'#B3D8FD'}">
      <span style="text-align: left;display: inline-block;width: 100%;margin-left: -15%;" slot="empty">暂无数据</span>
      <el-table-column fixed align="center" min-width="100" label="流水号" prop="serialNo"/>
      <!--<el-table-column align="center" min-width="100" label="凭证号" prop="voucherNo"/>-->
      <el-table-column align="center" min-width="150" label="交易订单号" prop="orderNo"/>
      <el-table-column align="center" min-width="120" label="交易时间" prop="tradeTime"/>
      <el-table-column align="center" min-width="100" label="收付方向" prop="payRecv"/>
      <el-table-column align="center" min-width="100" label="币种" prop="currency"/>
      <el-table-column align="center" min-width="200" label="金额(元)" prop="money"/>
      <el-table-column align="center" min-width="100" label="收款账号" prop="recvAccount"/>
      <el-table-column align="center" min-width="110" label="收款户名" prop="recvAccountName"/>
      <el-table-column align="center" min-width="110" label="收款联行号" prop="recvBankNo"/>
      <el-table-column align="center" min-width="200" label="收款银行名称" prop="recvBankName"/>
      <el-table-column align="center" min-width="100" label="付款账号" prop="payAccount"/>
      <el-table-column align="center" min-width="200" label="付款户名" prop="payAccountName"/>
      <el-table-column align="center" min-width="200" label="付款联行号" prop="payBankNo"/>
      <!--<el-table-column align="center" min-width="200" label="付款银行名称" prop="payBankName"/>
      <el-table-column align="center" min-width="200" label="用途" prop="usage"/>
      <el-table-column align="center" min-width="170" label="摘要" prop="abstract"/>
      <el-table-column align="center" min-width="170" label="附言" prop="postscript"/>-->
      <el-table-column fixed="right" align="center" min-width="170" label="支付结果" prop="payResult"/>
      <el-table-column fixed="right" align="center" min-width="170" label="结果原因" prop="reason"/>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                @pagination="getList"/>
  </div>
</template>

<script>
  import {doGet, doPost} from '@/api'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  export default {
        name: "bankserial",
    components: {Pagination},

      data() {
          return {
            list: [],
            listLoading: false,
            total: 0,
            listQuery: {
              page: 1,
              limit: 20,
            },
            editForm: {
              account: undefined,
              endDate: undefined,
              startDate: undefined,
              payRecv: undefined
            },
            editFormRules: {
              account: [{required: true, message: '账户号不允许为空', trigger: 'blur'}],
              endDate: [{required: true, message: '请选择查询结束日期', trigger: 'blur'}],
              startDate: [{required: true, message: '请选择查询起始日期', trigger: 'blur'}]
            },
          }
      },

      methods: {
        // 获取余额列表
        getList() {
          this.listLoading = true
          let setData = {
            ...this.editForm,
            ...this.listQuery,
            account: this.editForm.account,
          }
          doGet('bankserial.html?op=search', setData).then(response => {
            this.list = response.rows
            this.total = response.rows.length
            this.listLoading = false
          }).catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
        },

        // 查询余额
        doQuery() {
          this.$refs['editForm'].validate(valid => {
            if (valid) {
              this.getList()
            }
          })
        }
      }
    }
</script>

<style scoped>

</style>
